<!DOCTYPE html>
<html>
  <head>
    <script src="../dist/jspsych.js"></script>
    <script src="../dist/plugin-video-button-response.js"></script>
    <script src="../dist/plugin-html-button-response.js"></script>
    <script src="../dist/plugin-preload.js"></script>
    <link rel="stylesheet" href="../dist/jspsych.css">
  </head>
  <body></body>
  <script>

    var jsPsych = initJsPsych({
      on_finish: function() {
        jsPsych.data.displayData();
      }
    });

    // preloading videos only works when the file is running on a server
    // if you run this experiment by opening the file directly in the browser, 
    // then video preloading will be disabled to prevent CORS errors
    var preload = {
      type: jsPsychPreload,
      auto_preload: true
    };

    var pre_trial = {
      type: jsPsychHtmlButtonResponse,
      stimulus: '<div style="max-width:600px;"><p>Some browsers now require that a user interacts with a web page before video or audio content will autoplay. Clicking the button below satisfies that requirement.</p><p>Without this trial, the video will load but not play.</p></div>',
      choices: ['Continue']
    };

    var trial_1 = {
      type: jsPsychVideoButtonResponse,
      stimulus: ['video/sample_video.mp4'],
      choices: ['Y','N'],
      margin_vertical: '10px',
      margin_horizontal: '8px',
      prompt: 'Press Y or N',
      width: 600,
      //height: 600,
      autoplay: true,
      //controls: true,
      //start: 8,
      //stop: 9,
      rate: 1.5,
      //trial_duration: 2000,
      response_ends_trial: true
    };

    var trial_2 = {
      type: jsPsychVideoButtonResponse,
      stimulus: ['video/sample_video.mp4'],
      choices: ['😄','😁','🥱','😣','🤯'],
      button_html: '<div style="font-size:40px;">%choice%</div>',
      margin_vertical: '10px',
      margin_horizontal: '8px',
      prompt: '<p>Click the emoji that best represents your reaction to the video</p><p>When the video stops, click a button to end the trial.</p><p>Response buttons are disabled while the video is playing.</p>',
      width: 600,
      autoplay: true,
      response_ends_trial: true,
      response_allowed_while_playing: false
    };

    jsPsych.run([preload, pre_trial, trial_1, trial_2]);

  </script>
</html>
